<template>
  <div class="content">
    <div class="block" v-loading="formLoading">
      <div class="block-top">
        <div class="title-item">
          <div class="block-top-title">公司基本信息</div>
          <div class="form-title-label" v-if="form.isStateOwned>0">国有</div>
          <div class="form-title-label" v-if="form.isDomesticInvestment>0">内资</div>
          <div class="form-title-label" v-if="form.isGoOnTheMarket>0">上市</div>
        </div>
        <div class="block-top-text">丰富的公司介绍，能获得更多求职者的青睐，为你的职位带来更多查看与沟通</div>
      </div>

      <div class="block-body">
        <div class="block-body-name" style="width:100px;">公司LOGO:</div>
        <div class="block-body-content" style="margin-left: 0;width: calc(100% - 100px)">
          <UploadFile :imageUrl="form.logoUrl?[form.logoUrl]:[]" @uploadSuccess="logoUrlSuccess" :accept="['jpg','jpeg','png']" :autoUpload="true"></UploadFile>
        </div>
      </div>
      <div class="block-body">
        <div class="block-body-name">公司简称:</div>
        <div class="block-body-content">
          <el-input v-model="form.brandName" maxlength="30" placeholder="请输入公司简称"
                    style="width: 350px"></el-input>
        </div>
      </div>
      <div class="block-body">
        <div class="block-body-name">公司全称:</div>
        <div class="block-body-content">
          <el-input v-model="form.comName" :disabled="true" style="width: 350px"></el-input>
        </div>
      </div>
      <div class="block-body">
        <div class="block-body-name">所在行业:</div>
        <div class="block-body-content">
          <el-cascader v-model="form.comType" :options="industryList" :props="optionProps" :show-all-levels="false" style="width: 350px"></el-cascader>
        </div>
      </div>
      <div class="block-body">
        <div class="block-body-name">企业性质:</div>
        <div class="block-body-content">
          <el-select v-model="form.nature" placeholder="请选择企业性质" style="width: 350px" v-loading="industryLoading">
            <el-option
                v-for="item in natureList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="block-body">
        <div class="block-body-name">注册资本:</div>
        <div class="block-body-content">
          <el-input type="number" v-model="form.regcap" placeholder="请输入注册资本单位为万元" max="9999999"
                    style="width: 350px"></el-input>
        </div>
      </div>
      <div class="block-body">
        <div class="block-body-name">人员规模:</div>
        <div class="block-body-content">
          <el-select v-model="form.scaleId" placeholder="请选择人员规模" style="width: 350px" v-loading="scaleLoading">
            <el-option
                v-for="item in scale"
                :key="item.id"
                :label="item.data"
                :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="block-body">
        <div class="block-body-name">福利待遇:</div>
        <div class="block-body-content">
          <el-input type="textarea" v-model="form.welfare" :rows="4" maxlength="100"
                    placeholder="请输入福利待遇，用逗号隔开" style="width: 350px"></el-input>
        </div>
      </div>
      <div class="block-body">
        <div class="block-body-name"
             style="width: 90px;display: flex;flex-direction: row;align-items: center;max-height: 80px;line-height: normal">
          <div class="name">公司相册</div>
        </div>
        <div class="block-body-content" style="margin-left: 0;width:calc(100% - 90px)">
          <UploadFile :imageUrl="imgUrlList" @uploadSuccess="imgUrlSuccess" @remove="removeImgUrl" :accept="['jpg','jpeg','png']" :multiple="true" :limit="9"></UploadFile>
        </div>
      </div>
      <div class="split-line"></div>
      <div class="block-top">
        <div class="block-top-title">公司介绍</div>
        <div class="block-top-text">可以简单介绍一下公司发展状况、服务领域、主要产品等信息</div>
      </div>
      <div style="padding-top: 20px;">
        <el-input
            style="min-height: 100px"
            type="textarea"
            placeholder="请输入内容"
            rows="5"
            v-model="form.comIntroduction"
            maxlength="500"
            show-word-limit
        >
        </el-input>
      </div>
      <div class="btn2 btn-block" @click="submit" style="padding: 3px 5px">保存</div>
    </div>
  </div>
</template>

<script>
import UploadFile from "@/components/Upload/UploadFile.vue";
import {delAlbum, getEnterpriseData, updateEnterprise} from "@/api/enterprise";
import {
  getIndustryAllApi,
  getNatureListApi,
  getScale as getScaleApi
} from "@/api/config";
import {validate} from "@/utils/validate";
import {randomString} from "@/utils/utils";

export default {
  name: 'CompanyInfo',
  components: {UploadFile},
  data() {
    return {
      imgUrlList:[],
      newImgUrlList:[],
      industry: [],
      industryList: [],
      natureList:[],
      industryLoading: false,
      optionProps: {
        value: 'industryCode',
        label: 'industryName',
        children: 'sonList',
      },
      scale: [],
      scaleLoading: false,

      formLoading: false,
      form: {
        logoUrl: '',
        brandName: '',
        comType: null,
        nature:null,
        regcap: 0,
        scaleId: null,
        comIntroduction: '',
        imgUrlList: [],
        welfare: '',
        comName: '',
      },
      rule:{
        brandName:{
          name: '公司简称',
          required: true,
        },
        comType:{
          name: '所在行业',
          required: true,
        },
        regcap:{
          name: '注册资本',
          required: true,
          validator: function (value, form, callback) {
            if(value.length>8){
              callback('请填写正确的注册资本，最大长度为8');
            }
            callback();
          }
        },
        scaleId:{
          name: '人员规模',
          required: true,
        },
        welfare:{
          name: '福利待遇',
          required: true,
        },
        comIntroduction:{
          name: '公司介绍',
          required: true,
        },
      }
    }
  },

  methods: {
    logoUrlSuccess(e) {
      this.form.logoUrl = e.data
    },
    imgUrlSuccess(e) {
      this.form.imgUrlList.push(e.data);
      this.imgUrlList.push({name:randomString(4)+'img',url:e.data})
    },
    removeImgUrl(data){
      this.imgUrlList=data.list;
      if(data.file.id){
        let loading=this.$loading({text:'删除中'})
        delAlbum({id:data.file.id}).then(()=>{
          this.$message.success('删除成功')
        }).finally(()=>{
          loading.close()
        })
      }
    },
    submit() {
      if(this.formLoading){
        this.$message.warning('请等待加载完成');
        return;
      }
      if(validate(this.form,this.rule)){
        let form=JSON.parse(JSON.stringify(this.form));
        delete form.comName;delete form.financingId;
        form.imgUrlList=form.imgUrlList.length>0?form.imgUrlList.join(','):'';
        form.welfare=form.welfare.replaceAll('，',',');
        if(typeof form.comType==='object'){
          form.comType=form.comType[3];
        }
        const loading=this.$loading({text:'提交中'})
        updateEnterprise(form).then(()=>{
          this.$message.success('保存成功');
          this.$store.dispatch('user/getUser');
        }).finally(()=>{
          loading.close();
        })
      }
    },
    getDetail() {
      this.formLoading=true;
      getEnterpriseData({}).then((res) => {
        if(res.imgUrlList!=='')
        {
          this.imgUrlList=res.imgUrlList.map((item) => {
            return {name: 'img_' + item.id, url: item.imgUrl, id: item.id}
          })
        }
        res.imgUrlList=[];
        this.form=res;
        console.log(this.form)
      }).finally(()=>{
        this.formLoading=false
      })
    },
    getIndustry(){
      this.industryLoading=true;
      getIndustryAllApi().then((res)=>{
        this.industryList=res
      }).finally(()=>{
        this.industryLoading=false
      })
    },
    getNature(){
      this.industryLoading=true;
      getNatureListApi().then((res)=>{
        this.natureList=res
      }).finally(()=>{
        this.industryLoading=false
      })
    },
    getScale(){
      this.scaleLoading=true;
      getScaleApi({}).then((res)=>{
        this.scale=res
      }).finally(()=>{
        this.scaleLoading=false
      })
    }
  },
  mounted() {
    this.getDetail();
    this.getIndustry();
    this.getScale();
    this.getNature();
  }
}
</script>

<style lang="scss">
.el-upload--picture-card {
  max-height: 150px;
  max-width: 150px;
  line-height: 150px;
}
.avatar-uploader-icon {
  font-size: 24px;
  color: #8c939d;
  width: 160px !important;
  height: 160px !important;
  line-height: 140px;
  text-align: center;
  margin-bottom: 15px;
  background: #F5F6F8;
  border-radius: 8px;
  margin-right: 20px;
}
.avatar {
  width: 160px !important;
  height: 160px !important;
  display: block;
  border-radius: 8px;
  margin-right: 20px;
}
.avatar-uploader-icon{
  font-size: 425px;
}
</style>
<style lang="scss" scoped>

.content {
  width: 100%;

  .block {
    background-color: #FFFFFF;
    border-radius: 5px;
    padding: 20px 20px 20px 20px;

    .block-top {
      .title-item{
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        .block-top-title {
          font-size: 24px;
          margin-right: 20px;
        }
        .form-title-label{
          width: 60px;
          height: 25px;
          border: 1px solid  #CCDDFF;
          color: #0256FF;
          text-align: center;
          border-radius: 5px;
          margin-right: 10px;
        }
      }
      .block-top-text {
        margin-top: 10px;
        color: #8c939d;
      }
    }

    .block-body {
      padding-top: 20px;
      display: flex;

      .block-body-name {
        color: #8c939d;
        line-height: 40px;
      }

      .block-body-content {
        margin-left: 20px;

        .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
          border-color: #409EFF;
        }

        .avatar-uploader-icon {
          border: 1px dashed #d9d9d9;
          font-size: 28px;
          color: #8c939d;
          width: 150px;
          height: 150px;
          line-height: 150px;
          text-align: center;
        }

        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
      }
    }

    .split-line {
      margin: 30px 0 30px 0;
      border: 1px solid #d9d9d9;
    }

    .btn-block {
      width: 60px;
      border-radius: 5px;
      margin-top: 20px;

    }
  }

}
</style>
